import './index.css'

/* 
列表项组件
根据接收的todo显示列表项界面
 */
export default function Item({todo, deleteTodo, toggleTodo}) {
  return (
    <li>
      <label>
        <input type="checkbox" checked={todo.complete} onChange={() => toggleTodo(todo)}/>
        <span>{todo.title}</span>
      </label>
      <button className="btn btn-danger" onClick={() => deleteTodo(todo.id)}>删除</button>
    </li>
  )
}